<template>
  <div class="new-consignee-background" v-if="visible">
    <div style="position: relative; width: 100vw; height: 100vh;">
      <div class="content" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
        <table style="text-align: center; margin: 0 auto;">
          <tr>
            <th colspan="2">新建收货人</th>
          </tr>
          <tr>
            <td>收货人:</td>
            <td><input v-model="consigneeName" style="margin-left: 2px;"/></td>
          </tr>
          <tr>
            <td>联系电话:</td>
            <td><input v-model="consigneePhone" style="margin-left: 2px;"/></td>
            <!-- <span ref="errorMsg" v-show="showErrorMsg" style="color: red;"></span> -->
          </tr>
          <tr>
            <td>地址:</td>
            <td><input v-model="consigneeAddress" style="margin-left: 2px;"/></td>
          </tr>
        </table>
        <div style="margin-top: 15px;">
          <span class="enter-button" @click="createNewConsignee">提交</span>
          <span class="enter-button" @click="cancelThis">取消</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  consigneeName: '',
  consigneePhone: '',
  consigneeAddress: '',
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    createNewConsignee() {
      axios.post(this.globalData.apiURL + '/consignee/new', {
        consigneeName: this.consigneeName,
        consigneePhone: this.consigneePhone,
        consigneeAddress: this.consigneeAddress
      }, {
        headers: {
          Authorization: this.globalData.User.Token
        }
      })
        .then(res => {
          console.log(res)
          this.$parent.loadConsigneeList()
          this.$parent.showNewConsignee(false)
        })
        .catch(error => {
          console.log(error)
        })
    },
    cancelThis() {
      this.$parent.showNewConsignee(false)
    }
  }
}
</script>

<style scoped>
.new-consignee-background {
  z-index: 15;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.content {
  display: inline-block;
  width: 60vw;
  padding: 3% 0;
  margin: auto;
  background-color: #ffffff;
}

.enter-button {
  margin: 0 15px;
  padding: 3px 10px;
  width: 80px;
  text-align: center;
  user-select: none;
  color: rgb(240, 246, 255);
  font-size: large;
  font-weight: 800;
  border-radius: 10px;
  background: linear-gradient(90deg, #0022ff, #002ead);
}
</style>
